<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客论坛后台管理系统 - 掘金风格</title>
    <link rel="icon" href="../static/favicon.png" type="image/png">
    <link rel="stylesheet" href="../static/plugins/fontawesome-free-6.0.0-web/css/all.min.css">
    <link href="../static/fonts/googleapis-fonts.css" rel="stylesheet">
    <script src="../static/js/chart.js"></script>
    <style>
        :root {
            --primary-color: #1e80ff;
            --primary-hover: #1171ee;
            --sidebar-bg: #001938;
            --sidebar-text: #fff;
            --sidebar-hover: #2d5b9e;
            --content-bg: #f4f5f5;
            --card-bg: #fff;
            --text-primary: #252933;
            --text-secondary: #515767;
            --border-color: #e4e6eb;
            --success-color: #00c853;
            --warning-color: #ff9500;
            --danger-color: #ff4d4f;
            --info-color: #00b8d9;
            --header-height: 60px;
            --sidebar-width: 240px;
            --border-radius: 8px;
            --transition-speed: 0.3s;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --card-padding: 24px;
        }

        .dark-theme {
            --content-bg: #0f1419;
            --card-bg: #1a2636;
            --text-primary: #e6e6e6;
            --text-secondary: #a8a8a8;
            --border-color: #2d3a4b;
            --sidebar-bg: #0a1018;
            --sidebar-hover: #1a2636;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            display: flex;
            min-height: 100vh;
            background-color: var(--content-bg);
            color: var(--text-primary);
            transition: background-color var(--transition-speed);
        }

        /* 侧边栏样式 */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--sidebar-bg);
            color: var(--sidebar-text);
            display: flex;
            flex-direction: column;
            transition: all var(--transition-speed);
            position: fixed;
            height: 100vh;
            z-index: 100;
            overflow-y: auto;
        }

        .logo {
            padding: 20px;
            font-size: 22px;
            font-weight: bold;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            height: var(--header-height);
        }

        .logo i {
            margin-right: 10px;
            color: var(--primary-color);
        }

        .logo span {
            flex-grow: 1;
        }

        .theme-toggle {
            background: none;
            border: none;
            color: var(--sidebar-text);
            cursor: pointer;
            font-size: 16px;
        }

        .menu {
            list-style: none;
            padding: 10px 0;
            flex-grow: 1;
        }

        .menu-item {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
            border-left: 4px solid transparent;
            position: relative;
        }

        .menu-item:hover {
            background: var(--sidebar-hover);
        }

        .menu-item.active {
            background: var(--sidebar-hover);
            border-left-color: var(--primary-color);
        }

        .menu-item i {
            margin-right: 12px;
            width: 20px;
            text-align: center;
            font-size: 18px;
        }

        .menu-badge {
            position: absolute;
            right: 15px;
            background: var(--primary-color);
            color: white;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 12px;
        }

        .user-info {
            padding: 15px;
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ddd;
            margin-right: 10px;
            overflow: hidden;
        }

        .user-details {
            flex-grow: 1;
        }

        .user-name {
            font-weight: 500;
        }

        .user-role {
            font-size: 12px;
            opacity: 0.8;
        }

        /* 主内容区样式 */
        .main-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin-left: var(--sidebar-width);
            transition: margin-left var(--transition-speed);
        }

        .header {
            padding: 0 20px;
            height: var(--header-height);
            background: var(--card-bg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 90;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .breadcrumb a {
            color: var(--text-secondary);
            text-decoration: none;
        }

        .breadcrumb i {
            margin: 0 8px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .search-box {
            display: flex;
            align-items: center;
            background: var(--content-bg);
            border-radius: 20px;
            padding: 8px 16px;
            width: 300px;
            transition: all 0.3s;
        }

        .search-box:focus-within {
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .search-box input {
            border: none;
            background: transparent;
            padding: 4px 8px;
            width: 100%;
            outline: none;
            color: var(--text-primary);
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .action-btn {
            position: relative;
            cursor: pointer;
            color: var(--text-secondary);
            transition: color 0.2s;
        }

        .action-btn:hover {
            color: var(--primary-color);
        }

        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--danger-color);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .user-profile img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }

        .content {
            flex-grow: 1;
            padding: 24px;
            overflow-y: auto;
        }

        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: var(--card-padding);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .stat-title {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .stat-change {
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .stat-change.positive {
            color: var(--success-color);
        }

        .stat-change.negative {
            color: var(--danger-color);
        }

        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            margin-bottom: 24px;
            overflow: hidden;
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-2px);
        }

        .card-header {
            padding: 16px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
        }

        .card-tools {
            display: flex;
            gap: 10px;
        }

        .card-body {
            padding: var(--card-padding);
        }

        /* 表格样式 */
        .table-container {
            overflow-x: auto;
            border-radius: var(--border-radius);
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        th, td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        th {
            background-color: var(--content-bg);
            font-weight: 600;
            position: sticky;
            top: 0;
        }

        tr:hover {
            background-color: var(--content-bg);
        }

        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }

        .btn i {
            margin-right: 6px;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }

        .btn-success {
            background: var(--success-color);
            color: white;
        }

        .btn-warning {
            background: var(--warning-color);
            color: white;
        }

        .btn-danger {
            background: var(--danger-color);
            color: white;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }

        .btn-outline:hover {
            background: var(--content-bg);
        }

        /* 表单控件 */
        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            background: var(--card-bg);
            color: var(--text-primary);
            transition: border-color 0.2s;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(30, 128, 255, 0.2);
        }

        /* 筛选栏 */
        .filter-bar {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 24px;
            gap: 6px;
        }

        .page-item {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            min-width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page-item.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* 操作按钮组 */
        .action-buttons {
            display: flex;
            gap: 6px;
        }

        /* 内容区域默认隐藏 */
        .content-section {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .content-section.active {
            display: block;
        }

        /* 状态指示器 */
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-published {
            background: rgba(0, 200, 83, 0.1);
            color: var(--success-color);
        }

        .status-hidden {
            background: rgba(255, 149, 0, 0.1);
            color: var(--warning-color);
        }

        .status-audit {
            background: rgba(0, 184, 217, 0.1);
            color: var(--info-color);
        }

        /* 图表容器 */
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }

        /* 通知中心 */
        .notification-center {
            position: absolute;
            top: 100%;
            right: 0;
            width: 360px;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            display: none;
            margin-top: 10px;
            border: 1px solid var(--border-color);
        }

        .notification-center.active {
            display: block;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .notification-header {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notification-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .notification-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .notification-item:last-child {
            border-bottom: none;
        }

        .notification-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notification-content {
            flex-grow: 1;
        }

        .notification-title {
            font-weight: 500;
            margin-bottom: 4px;
        }

        .notification-time {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .dashboard-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 992px) {
            .sidebar {
                width: 70px;
                transform: translateX(0);
            }

            .sidebar.collapsed {
                transform: translateX(-100%);
            }

            .logo span, .menu-item span, .user-details {
                display: none;
            }

            .logo i, .menu-item i {
                margin-right: 0;
            }

            .menu-item {
                justify-content: center;
                padding: 14px 0;
            }

            .main-content {
                margin-left: 0;
            }

            .menu-toggle {
                display: block;
            }

            .search-box {
                width: 200px;
            }
        }

        @media (max-width: 768px) {
            .dashboard-cards {
                grid-template-columns: 1fr;
            }

            .header {
                padding: 0 16px;
            }

            .search-box {
                display: none;
            }

            .content {
                padding: 16px;
            }

            .filter-bar {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-bar > * {
                width: 100%;
            }
        }

        /* 菜单切换按钮 */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 20px;
            cursor: pointer;
            margin-right: 16px;
        }

        @media (max-width: 992px) {
            .menu-toggle {
                display: block;
            }
        }

        /* 加载动画 */
        .loader {
            border: 3px solid var(--content-bg);
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 选项卡 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* 头像网格布局 */
        .avatar-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .avatar-item {
            position: relative;
            text-align: center;
        }

        .avatar-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border-color);
            transition: all 0.3s;
        }

        .avatar-item:hover .avatar-img {
            border-color: var(--primary-color);
            transform: scale(1.05);
        }

        .avatar-name {
            margin-top: 8px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* 标签样式 */
        .tag {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .tag-primary {
            background: rgba(30, 128, 255, 0.1);
            color: var(--primary-color);
        }

        .tag-success {
            background: rgba(0, 200, 83, 0.1);
            color: var(--success-color);
        }

        .tag-warning {
            background: rgba(255, 149, 0, 0.1);
            color: var(--warning-color);
        }

        /* 自定义下拉框 */
        .custom-select {
            position: relative;
            display: inline-block;
            width: auto;
        }

        .select-selected {
            background-color: var(--card-bg);
            color: var(--text-primary);
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            user-select: none;
        }

        .select-items {
            position: absolute;
            background-color: var(--card-bg);
            top: 100%;
            left: 0;
            right: 0;
            z-index: 99;
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 6px 6px;
            max-height: 200px;
            overflow-y: auto;
            display: none;
        }

        .select-item {
            padding: 10px 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .select-item:hover {
            background-color: var(--content-bg);
        }

        /* 模态框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: var(--card-bg);
            margin: 10% auto;
            padding: 24px;
            border-radius: var(--border-radius);
            width: 80%;
            max-width: 600px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            animation: modalFadeIn 0.3s;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: var(--text-primary);
        }
    </style>
</head>
<body>
<!-- 侧边栏 -->
<aside class="sidebar">
    <div class="logo">
        <i class="fas fa-cube"></i>
        <span>管理中心</span>
        <button class="theme-toggle" id="theme-toggle">
            <i class="fas fa-moon"></i>
        </button>
    </div>

    <ul class="menu">
        <li class="menu-item active" data-target="dashboard">
            <i class="fas fa-tachometer-alt"></i>
            <span>控制面板</span>
        </li>
        <li class="menu-item" data-target="article-management">
            <i class="fas fa-file-alt"></i>
            <span>文章管理</span>
            <span class="menu-badge">3</span>
        </li>
        <li class="menu-item" data-target="comment-management">
            <i class="fas fa-comments"></i>
            <span>评论管理</span>
            <span class="menu-badge">12</span>
        </li>
        <li class="menu-item" data-target="user-management">
            <i class="fas fa-users"></i>
            <span>用户管理</span>
        </li>
        <li class="menu-item" data-target="points-management">
            <i class="fas fa-coins"></i>
            <span>积分管理</span>
        </li>
        <li class="menu-item" data-target="favorite-management">
            <i class="fas fa-star"></i>
            <span>收藏管理</span>
        </li>
        <li class="menu-item" data-target="recommend-management">
            <i class="fas fa-thumbs-up"></i>
            <span>推荐管理</span>
        </li>
        <li class="menu-item" data-target="hide-management">
            <i class="fas fa-eye-slash"></i>
            <span>隐藏管理</span>
        </li>
        <li class="menu-item" data-target="contribution-review">
            <i class="fas fa-clipboard-check"></i>
            <span>投稿审核</span>
            <span class="menu-badge">5</span>
        </li>
        <li class="menu-item" data-target="system-broadcast">
            <i class="fas fa-bullhorn"></i>
            <span>系统广播</span>
        </li>
        <li class="menu-item" data-target="avatar-management">
            <i class="fas fa-user-circle"></i>
            <span>头像管理</span>
        </li>
    </ul>

    <div class="user-info">
        <div class="user-avatar">
            <img src="../static/img/avatar/{{session.avatar}}" alt="Avatar" width="40px">
        </div>
        <div class="user-details">
            <div class="user-name">管理员</div>
            <div class="user-role">超级管理员</div>
        </div>
    </div>
</aside>

<!-- 主内容区 -->
<main class="main-content">
    <div class="header">
        <div class="header-left">
            <button class="menu-toggle" id="menu-toggle">
                <i class="fas fa-bars"></i>
            </button>
            <div class="breadcrumb">
                <a href="#">首页</a>
                <i class="fas fa-chevron-right"></i>
                <span>控制面板</span>
            </div>
        </div>

        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="全局搜索...">
        </div>

        <div class="user-actions">
            <div class="action-btn" id="notification-btn">
                <i class="fas fa-bell"></i>
                <div class="badge">3</div>
            </div>
            <div class="action-btn">
                <i class="fas fa-cog"></i>
            </div>
            <div class="user-profile">
                <img src="../static/img/avatar/{{session.avatar}}" alt="User">
                <span>管理员</span>
            </div>
        </div>
    </div>

    <!-- 通知中心 -->
    <div class="notification-center" id="notification-center">
        <div class="notification-header">
            <span>通知</span>
            <a href="#" style="color: var(--primary-color); font-size: 13px;">全部已读</a>
        </div>
        <div class="notification-list">
            <div class="notification-item">
                <div class="notification-icon" style="background: rgba(30, 128, 255, 0.1); color: var(--primary-color);">
                    <i class="fas fa-user-plus"></i>
                </div>
                <div class="notification-content">
                    <div class="notification-title">新用户注册</div>
                    <div class="notification-desc">用户 "前端小白" 刚刚注册了账户</div>
                    <div class="notification-time">10分钟前</div>
                </div>
            </div>
            <div class="notification-item">
                <div class="notification-icon" style="background: rgba(0, 200, 83, 0.1); color: var(--success-color);">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="notification-content">
                    <div class="notification-title">投稿已通过</div>
                    <div class="notification-desc">文章 "TypeScript 高级类型实战" 已通过审核</div>
                    <div class="notification-time">2小时前</div>
                </div>
            </div>
            <div class="notification-item">
                <div class="notification-icon" style="background: rgba(255, 77, 79, 0.1); color: var(--danger-color);">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <div class="notification-content">
                    <div class="notification-title">系统警告</div>
                    <div class="notification-desc">CPU 使用率超过 80%，请检查系统状态</div>
                    <div class="notification-time">5小时前</div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <!-- 控制面板 -->
        <div class="content-section active" id="dashboard">
            <div class="dashboard-cards">
                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">总文章数</div>
                        <div class="stat-icon" style="background: rgba(30, 128, 255, 0.1); color: var(--primary-color);">
                            <i class="fas fa-file-alt"></i>
                        </div>
                    </div>
                    <div class="stat-value">1,248</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i> 12% 较上月
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">总用户数</div>
                        <div class="stat-icon" style="background: rgba(0, 200, 83, 0.1); color: var(--success-color);">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                    <div class="stat-value">5,378</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i> 8% 较上月
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">今日访问量</div>
                        <div class="stat-icon" style="background: rgba(255, 149, 0, 0.1); color: var(--warning-color);">
                            <i class="fas fa-eye"></i>
                        </div>
                    </div>
                    <div class="stat-value">12,489</div>
                    <div class="stat-change positive">
                        <i class="fas fa-arrow-up"></i> 5% 较昨日
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-header">
                        <div class="stat-title">待审核内容</div>
                        <div class="stat-icon" style="background: rgba(255, 77, 79, 0.1); color: var(--danger-color);">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                    <div class="stat-value">23</div>
                    <div class="stat-change negative">
                        <i class="fas fa-arrow-up"></i> 3 条新投稿
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">访问量统计</h2>
                    <div class="card-tools">
                        <select class="form-control" style="width: auto;">
                            <option>最近7天</option>
                            <option>最近30天</option>
                            <option>今年</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="trafficChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">最近活动</h2>
                    <button class="btn btn-outline btn-sm">查看全部</button>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>用户</th>
                                <th>活动</th>
                                <th>时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>张三</td>
                                <td>发布了新文章 "Vue3 组合式 API 实战指南"</td>
                                <td>2小时前</td>
                            </tr>
                            <tr>
                                <td>李四</td>
                                <td>评论了文章 "React Hooks 最佳实践"</td>
                                <td>4小时前</td>
                            </tr>
                            <tr>
                                <td>王五</td>
                                <td>注册了新账户</td>
                                <td>5小时前</td>
                            </tr>
                            <tr>
                                <td>赵六</td>
                                <td>投稿了文章 "TypeScript 高级类型实战"</td>
                                <td>昨天</td>
                            </tr>
                            <tr>
                                <td>钱七</td>
                                <td>收藏了文章 "Node.js 性能优化实战"</td>
                                <td>昨天</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文章管理 -->
        <div class="content-section" id="article-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">文章管理</h2>
                    <button class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> 新增文章
                    </button>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <select class="form-control" style="width: auto;">
                            <option>所有类别</option>
                            <option>前端开发</option>
                            <option>后端开发</option>
                            <option>移动开发</option>
                            <option>人工智能</option>
                        </select>
                        <input type="text" class="form-control" placeholder="搜索文章标题..." style="width: 250px;">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>编号</th>
                                <th>标题</th>
                                <th>作者</th>
                                <th>浏览量</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1001</td>
                                <td>Vue3 组合式 API 实战指南</td>
                                <td>张三</td>
                                <td>2,458</td>
                                <td><span class="status-badge status-published">已发布</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1002</td>
                                <td>React Hooks 最佳实践</td>
                                <td>李四</td>
                                <td>3,782</td>
                                <td><span class="status-badge status-hidden">已隐藏</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye"></i> 显示</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1003</td>
                                <td>Node.js 性能优化实战</td>
                                <td>王五</td>
                                <td>1,925</td>
                                <td><span class="status-badge status-audit">待审核</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1004</td>
                                <td>TypeScript 高级类型实战</td>
                                <td>赵六</td>
                                <td>3,245</td>
                                <td><span class="status-badge status-published">已发布</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1005</td>
                                <td>Webpack 5 新特性解析</td>
                                <td>钱七</td>
                                <td>1,567</td>
                                <td><span class="status-badge status-published">已发布</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评论管理 -->
        <div class="content-section" id="comment-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">评论管理</h2>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <select class="form-control" style="width: auto;">
                            <option>所有文章</option>
                            <option>Vue3 组合式 API 实战指南</option>
                            <option>React Hooks 最佳实践</option>
                            <option>Node.js 性能优化实战</option>
                        </select>
                        <input type="text" class="form-control" placeholder="搜索评论内容..." style="width: 250px;">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>评论内容</th>
                                <th>评论者</th>
                                <th>所属文章</th>
                                <th>评论时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>这篇文章对我帮助很大，谢谢作者！</td>
                                <td>前端小白</td>
                                <td>Vue3 组合式 API 实战指南</td>
                                <td>2023-06-15 14:30</td>
                                <td><span class="status-badge status-published">正常</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>有些地方讲得不够详细，希望可以补充</td>
                                <td>React开发者</td>
                                <td>React Hooks 最佳实践</td>
                                <td>2023-06-14 09:15</td>
                                <td><span class="status-badge status-hidden">已隐藏</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-eye"></i> 显示</button>
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>期待作者出续集！</td>
                                <td>Node.js爱好者</td>
                                <td>Node.js 性能优化实战</td>
                                <td>2023-06-13 16:45</td>
                                <td><span class="status-badge status-published">正常</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>内容很有深度，值得一读</td>
                                <td>TypeScript用户</td>
                                <td>TypeScript 高级类型实战</td>
                                <td>2023-06-12 11:20</td>
                                <td><span class="status-badge status-published">正常</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-eye-slash"></i> 隐藏</button>
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户管理 -->
        <div class="content-section" id="user-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">用户管理</h2>
                    <button class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> 添加用户
                    </button>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <input type="text" class="form-control" placeholder="搜索用户名或邮箱..." style="width: 300px;">
                        <select class="form-control" style="width: auto;">
                            <option>所有状态</option>
                            <option>正常</option>
                            <option>已冻结</option>
                        </select>
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>用户ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>注册时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>10001</td>
                                <td>张三</td>
                                <td>zhangsan@example.com</td>
                                <td>2023-05-10</td>
                                <td><span class="status-badge status-published">正常</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-lock"></i> 冻结</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>10002</td>
                                <td>李四</td>
                                <td>lisi@example.com</td>
                                <td>2023-05-15</td>
                                <td><span class="status-badge status-hidden">已冻结</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-success btn-sm"><i class="fas fa-unlock"></i> 解冻</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>10003</td>
                                <td>王五</td>
                                <td>wangwu@example.com</td>
                                <td>2023-05-20</td>
                                <td><span class="status-badge status-published">正常</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-lock"></i> 冻结</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>10004</td>
                                <td>赵六</td>
                                <td>zhaoliu@example.com</td>
                                <td>2023-05-25</td>
                                <td><span class="status-badge status-published">正常</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-lock"></i> 冻结</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 积分管理 -->
        <div class="content-section" id="points-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">积分管理</h2>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <input type="text" class="form-control" placeholder="搜索用户名..." style="width: 250px;">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>用户ID</th>
                                <th>用户名</th>
                                <th>当前积分</th>
                                <th>积分变更</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>10001</td>
                                <td>张三</td>
                                <td>1,245</td>
                                <td>
                                    <input type="number" class="form-control" style="width: 100px;" placeholder="积分值">
                                </td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-plus"></i> 增加</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-minus"></i> 减少</button>
                                </td>
                            </tr>
                            <tr>
                                <td>10002</td>
                                <td>李四</td>
                                <td>856</td>
                                <td>
                                    <input type="number" class="form-control" style="width: 100px;" placeholder="积分值">
                                </td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-plus"></i> 增加</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-minus"></i> 减少</button>
                                </td>
                            </tr>
                            <tr>
                                <td>10003</td>
                                <td>王五</td>
                                <td>2,103</td>
                                <td>
                                    <input type="number" class="form-control" style="width: 100px;" placeholder="积分值">
                                </td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-plus"></i> 增加</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-minus"></i> 减少</button>
                                </td>
                            </tr>
                            <tr>
                                <td>10004</td>
                                <td>赵六</td>
                                <td>1,576</td>
                                <td>
                                    <input type="number" class="form-control" style="width: 100px;" placeholder="积分值">
                                </td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-plus"></i> 增加</button>
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-minus"></i> 减少</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 收藏管理 -->
        <div class="content-section" id="favorite-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">收藏管理</h2>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <select class="form-control" style="width: auto;">
                            <option>所有文章</option>
                            <option>Vue3 组合式 API 实战指南</option>
                            <option>React Hooks 最佳实践</option>
                            <option>Node.js 性能优化实战</option>
                        </select>
                        <input type="text" class="form-control" placeholder="搜索收藏者..." style="width: 200px;">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>文章标题</th>
                                <th>收藏者</th>
                                <th>收藏时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Vue3 组合式 API 实战指南</td>
                                <td>前端小白</td>
                                <td>2023-06-15 14:30</td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-list"></i> 查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>React Hooks 最佳实践</td>
                                <td>React开发者</td>
                                <td>2023-06-14 09:15</td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-list"></i> 查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>Node.js 性能优化实战</td>
                                <td>Node.js爱好者</td>
                                <td>2023-06-13 16:45</td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-list"></i> 查看详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td>TypeScript 高级类型实战</td>
                                <td>TypeScript用户</td>
                                <td>2023-06-12 11:20</td>
                                <td class="action-buttons">
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-list"></i> 查看详情</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐管理 -->
        <div class="content-section" id="recommend-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">推荐管理</h2>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <input type="text" class="form-control" placeholder="搜索文章标题..." style="width: 300px;">
                        <select class="form-control" style="width: auto;">
                            <option>所有状态</option>
                            <option>已推荐</option>
                            <option>未推荐</option>
                        </select>
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>文章标题</th>
                                <th>作者</th>
                                <th>发布时间</th>
                                <th>推荐状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Vue3 组合式 API 实战指南</td>
                                <td>张三</td>
                                <td>2023-06-10</td>
                                <td><span class="status-badge status-published">已推荐</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-times"></i> 取消推荐</button>
                                </td>
                            </tr>
                            <tr>
                                <td>React Hooks 最佳实践</td>
                                <td>李四</td>
                                <td>2023-06-08</td>
                                <td><span class="status-badge status-hidden">未推荐</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                </td>
                            </tr>
                            <tr>
                                <td>Node.js 性能优化实战</td>
                                <td>王五</td>
                                <td>2023-06-05</td>
                                <td><span class="status-badge status-hidden">未推荐</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-thumbs-up"></i> 推荐</button>
                                </td>
                            </tr>
                            <tr>
                                <td>TypeScript 高级类型实战</td>
                                <td>赵六</td>
                                <td>2023-06-03</td>
                                <td><span class="status-badge status-published">已推荐</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-warning btn-sm"><i class="fas fa-times"></i> 取消推荐</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 隐藏管理 -->
        <div class="content-section" id="hide-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">隐藏管理</h2>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <select class="form-control" style="width: auto;">
                            <option>所有类型</option>
                            <option>文章</option>
                            <option>评论</option>
                            <option>用户</option>
                        </select>
                        <input type="text" class="form-control" placeholder="搜索内容..." style="width: 250px;">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>内容类型</th>
                                <th>标题/内容</th>
                                <th>作者/发布者</th>
                                <th>隐藏时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>文章</td>
                                <td>React Hooks 最佳实践</td>
                                <td>李四</td>
                                <td>2023-06-14 09:15</td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-eye"></i> 取消隐藏</button>
                                </td>
                            </tr>
                            <tr>
                                <td>评论</td>
                                <td>有些地方讲得不够详细，希望可以补充</td>
                                <td>React开发者</td>
                                <td>2023-06-14 10:30</td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-eye"></i> 取消隐藏</button>
                                </td>
                            </tr>
                            <tr>
                                <td>用户</td>
                                <td>李四 (已冻结)</td>
                                <td>lisi@example.com</td>
                                <td>2023-06-13 16:45</td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-eye"></i> 取消隐藏</button>
                                </td>
                            </tr>
                            <tr>
                                <td>评论</td>
                                <td>这个观点我不太同意</td>
                                <td>匿名用户</td>
                                <td>2023-06-12 14:20</td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-eye"></i> 取消隐藏</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 投稿审核 -->
        <div class="content-section" id="contribution-review">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">投稿审核</h2>
                </div>
                <div class="card-body">
                    <div class="filter-bar">
                        <select class="form-control" style="width: auto;">
                            <option>所有状态</option>
                            <option>待审核</option>
                            <option>已通过</option>
                            <option>已拒绝</option>
                        </select>
                        <input type="text" class="form-control" placeholder="搜索文章标题..." style="width: 250px;">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>文章标题</th>
                                <th>作者</th>
                                <th>投稿时间</th>
                                <th>审核状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>TypeScript 高级类型实战</td>
                                <td>赵六</td>
                                <td>2023-06-15 14:30</td>
                                <td><span class="status-badge status-audit">待审核</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-check"></i> 通过</button>
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-times"></i> 拒绝</button>
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
                                </td>
                            </tr>
                            <tr>
                                <td>Webpack 5 新特性解析</td>
                                <td>钱七</td>
                                <td>2023-06-14 09:15</td>
                                <td><span class="status-badge status-published">已通过</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-times"></i> 撤销通过</button>
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
                                </td>
                            </tr>
                            <tr>
                                <td>前端性能优化十大策略</td>
                                <td>孙八</td>
                                <td>2023-06-13 16:45</td>
                                <td><span class="status-badge status-hidden">已拒绝</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-check"></i> 重新审核</button>
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
                                </td>
                            </tr>
                            <tr>
                                <td>Docker 容器化部署指南</td>
                                <td>周九</td>
                                <td>2023-06-12 11:20</td>
                                <td><span class="status-badge status-audit">待审核</span></td>
                                <td class="action-buttons">
                                    <button class="btn btn-success btn-sm"><i class="fas fa-check"></i> 通过</button>
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-times"></i> 拒绝</button>
                                    <button class="btn btn-primary btn-sm"><i class="fas fa-eye"></i> 预览</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">...</div>
                        <div class="page-item">10</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统广播 -->
        <div class="content-section" id="system-broadcast">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">系统广播</h2>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">广播内容</label>
                        <textarea class="form-control" rows="5" placeholder="请输入广播内容..."></textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label">接收用户</label>
                        <select class="form-control" id="broadcast-type">
                            <option>所有用户</option>
                            <option>指定用户</option>
                        </select>
                    </div>

                    <div class="form-group" id="specified-user" style="display: none;">
                        <label class="form-label">指定用户ID</label>
                        <input type="text" class="form-control" placeholder="输入用户ID，多个用逗号分隔">
                    </div>

                    <button class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> 发送广播
                    </button>

                    <h3 style="margin-top: 30px; margin-bottom: 15px;">历史广播记录</h3>

                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>时间</th>
                                <th>内容</th>
                                <th>接收范围</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2023-06-15 14:30</td>
                                <td>系统将于今晚凌晨2点进行维护，预计耗时2小时</td>
                                <td>所有用户</td>
                                <td>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2023-06-10 09:15</td>
                                <td>欢迎使用新版本博客系统，如有问题请反馈</td>
                                <td>所有用户</td>
                                <td>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2023-06-05 16:20</td>
                                <td>您的投稿已通过审核，感谢您的分享</td>
                                <td>用户ID: 10023</td>
                                <td>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2023-06-01 10:45</td>
                                <td>恭喜您获得本月活跃用户奖励，请查收积分</td>
                                <td>用户ID: 10015, 10028, 10037</td>
                                <td>
                                    <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 头像管理 -->
        <div class="content-section" id="avatar-management">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">头像管理</h2>
                    <button class="btn btn-primary btn-sm" id="add-avatar-btn">
                        <i class="fas fa-plus"></i> 新增头像
                    </button>
                </div>
                <div class="card-body">
                    <div class="avatar-grid">
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像1</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/ff0000" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像2</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/00ff00" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像3</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/0000ff" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像4</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/ffff00" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像5</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/00ffff" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像6</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/ff00ff" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像7</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="avatar-item">
                            <img src="https://via.placeholder.com/100/cccccc" alt="Avatar" class="avatar-img">
                            <div class="avatar-name">默认头像8</div>
                            <button class="btn btn-danger btn-sm" style="position: absolute; top: 0; right: 0;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 添加头像模态框 -->
<div id="avatar-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>添加新头像</h2>
        <div class="form-group">
            <label class="form-label">头像名称</label>
            <input type="text" class="form-control" placeholder="输入头像名称">
        </div>
        <div class="form-group">
            <label class="form-label">上传头像</label>
            <input type="file" class="form-control" accept="image/*">
        </div>
        <button class="btn btn-primary">上传头像</button>
    </div>
</div>

<script>
    // 菜单切换功能
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有active类
            document.querySelectorAll('.menu-item').forEach(i => {
                i.classList.remove('active');
            });
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });

            // 添加active类到当前项
            this.classList.add('active');
            const target = this.getAttribute('data-target');
            document.getElementById(target).classList.add('active');

            // 更新面包屑导航
            updateBreadcrumb(this.querySelector('span').textContent);
        });
    });

    // 更新面包屑导航
    function updateBreadcrumb(currentPage) {
        const breadcrumb = document.querySelector('.breadcrumb');
        breadcrumb.innerHTML = `
                <a href="#">首页</a>
                <i class="fas fa-chevron-right"></i>
                <span>${currentPage}</span>
            `;
    }

    // 主题切换
    const themeToggle = document.getElementById('theme-toggle');
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-theme');
        const icon = this.querySelector('i');
        if (document.body.classList.contains('dark-theme')) {
            icon.classList.remove('fa-moon');
            icon.classList.add('fa-sun');
        } else {
            icon.classList.remove('fa-sun');
            icon.classList.add('fa-moon');
        }

        // 保存主题偏好
        localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light');
    });

    // 检查保存的主题偏好
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark-theme');
        themeToggle.querySelector('i').classList.remove('fa-moon');
        themeToggle.querySelector('i').classList.add('fa-sun');
    }

    // 菜单切换（移动端）
    const menuToggle = document.getElementById('menu-toggle');
    menuToggle.addEventListener('click', function() {
        document.querySelector('.sidebar').classList.toggle('collapsed');
    });

    // 通知中心
    const notificationBtn = document.getElementById('notification-btn');
    const notificationCenter = document.getElementById('notification-center');

    notificationBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        notificationCenter.classList.toggle('active');
    });

    // 点击其他地方关闭通知中心
    document.addEventListener('click', function(e) {
        if (!notificationCenter.contains(e.target) && e.target !== notificationBtn) {
            notificationCenter.classList.remove('active');
        }
    });

    // 系统广播指定用户显示/隐藏
    document.getElementById('broadcast-type').addEventListener('change', function() {
        const specifiedUser = document.getElementById('specified-user');
        if (this.value === '指定用户') {
            specifiedUser.style.display = 'block';
        } else {
            specifiedUser.style.display = 'none';
        }
    });

    // 流量统计图表
    const trafficCtx = document.getElementById('trafficChart').getContext('2d');
    const trafficChart = new Chart(trafficCtx, {
        type: 'line',
        data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
                label: '访问量',
                data: [12000, 19000, 15000, 25000, 22000, 18000, 24000],
                borderColor: '#1e80ff',
                backgroundColor: 'rgba(30, 128, 255, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });

    // 头像模态框
    const avatarModal = document.getElementById('avatar-modal');
    const addAvatarBtn = document.getElementById('add-avatar-btn');
    const closeModal = document.getElementsByClassName('close')[0];

    addAvatarBtn.onclick = function() {
        avatarModal.style.display = 'block';
    }

    closeModal.onclick = function() {
        avatarModal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == avatarModal) {
            avatarModal.style.display = 'none';
        }
    }

    // 模拟数据加载
    function loadContent(section) {
        // 在实际应用中，这里会通过AJAX加载数据
        console.log(`加载 ${section} 的数据...`);
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 默认显示控制面板
        loadContent('dashboard');
    });
</script>
</body>
</html>